<template>
    <a-row justify="center" style="height: 100%;">
        <a-col :span="16" style="height: 100%;">
            <!-- 大屏展示数据 -->
            <a-space direction="vertical" fill size="large">
                <div></div>
                <a-row justify="space-around">
                    <a-col :span="7">
                        <div class="box">
                            <div class="icon1">
                                <img src="@/assets/static/images/icon1.png" alt="">
                            </div>
                            <div class="iconContent">
                                <div style="color: rgba(148, 174, 217, 1);">
                                    年度采购额(万元)
                                </div>
                                <div style="margin-top: 14px;">
                                    <h2>289</h2>
                                </div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="7">
                        <div class="box">
                            <div class="icon1">
                                <img src="@/assets/static/images/icon2.png" alt="">
                            </div>
                            <div class="iconContent">
                                <div style="color: rgba(148, 174, 217, 1);">
                                    年度订单总数
                                </div>
                                <div style="margin-top: 14px;">
                                    <h2>372</h2>
                                </div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="7">
                        <div class="box">
                            <div class="icon1">
                                <img src="@/assets/static/images/icon3.png" alt="">
                            </div>
                            <div class="iconContent">
                                <div style="color: rgba(148, 174, 217, 1);">
                                    供应商数量
                                </div>
                                <div style="margin-top: 14px;">
                                    <h2>23</h2>
                                </div>
                            </div>
                        </div>
                    </a-col>
                </a-row>
                <a-row justify="center" style="height: 100%;">
                    <a-col :span="23">
                        <div class="box2">

                        </div>
                    </a-col>
                </a-row>
            </a-space>
        </a-col>
        <a-col :span="8" style="height: 100%;">
            <!-- 右侧栏 -->
            <a-space direction="vertical" fill size="large">
                <div></div>
                <a-row justify="center">
                    <a-col :span="23">
                        <div class="calendar">
                            <a-date-picker hide-trigger :default-value="new Date()" style="border-radius: 10px;" />
                        </div>
                    </a-col>
                </a-row>
                <a-row justify="center">
                    <a-col :span="23">
                        <a-scrollbar style="height: 32vh;overflow: auto;">
                            <div class="note">

                            </div>
                        </a-scrollbar>
                    </a-col>
                </a-row>
            </a-space>
        </a-col>
    </a-row>
</template>
<script setup>
</script>
<style scoped>
.box {
    height: 14vh;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.iconContent {
    margin-left: 10%;
    width: 50%;
    overflow: hidden;
}

.box2 {
    height: 66vh;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    background: url("@/assets/static/images/icon4.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.calendar {
    /* background: rgba(255, 255, 255, 1); */
    /* border-radius: 10px; */
    height: 48vh;
}

.note {
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    min-height: 100%;
    background: url("@/assets/static/images/icon5.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
}
</style>